클라이언트 디렉토리와 화면 구조 이해하기

wwwroot 디렉토리: 모듈의 기본 디렉토리 (1/2)

wwwroot는 클라이언트 측의 모든 로직과 리소스가 이 디렉토리를 중심으로 구성됩니다.

$(HANDSTACK_SRC)/2.Modules/[모듈 ID]/wwwroot

• assets/

• lib/

• css/

• js/

wwwroot 디렉토리: 모듈의 기본 디렉토리 (2/2)

• img/

http://localhost:8421/[모듈 ID]/**.*

js/ - 공통 스크립트 (1/3)

모듈 내에서 클라이언트 측 기능을 담당하는 공통 JavaScript 파일을 저장합니다.

js/ - 공통 스크립트 (2/3)

• 예시
  • /js/module-user.js
  • /js/utilities.js

js/ - 공통 스크립트 (3/3)

• 특징
  • 여러 화면에서 공통으로 사용하는 유틸리티 함수나 로직을 포함합니다.
  • 수동으로 관리하거나 커스터마이징된 라이브러리를 직접 포함할 수 있습니다.

wwwroot 모듈의 wwwroot 디렉토리: 웹의 기본 디렉토리 (1/2)

wwwroot는 클라이언트 측의 공통 로직과 리소스가 이 디렉토리를 중심으로 구성됩니다.

$(HANDSTACK_SRC)/2.Modules/wwwroot/wwwroot

• 클라이언트 디렉토리 구조/

• font/

• sample/

wwwroot 모듈의 wwwroot 디렉토리: 웹의 기본 디렉토리 (2/2)

• uicontrols/

http://localhost:8421/**.*

view/ - 화면의 핵심 (1/2)

모듈별 업무 화면을 구성하는 HTML과 JavaScript 파일을 저장합니다.

• 예시

  • /view/TST/TST010.html (화면의 구조)
  • /view/TST/TST010.js (화면의 동작)

• 특징

  • HTML 파일과 JS 파일이 동일한 이름으로 쌍을 이룹니다.
  • 서버 기술에 의존하지 않는 순수 HTML(Plain HTML)과 Vanilla JavaScript로 개발하여 명확한 역할 분리를 지향합니다.

view/ - 화면의 핵심 (2/2)

• 자세한 내용은 화면 개발 시작하기 문서를 참고하세요.

오픈소스 라이브러리 관리 (1/2)

HandStack은 libman을 사용하여 프론트엔드 라이브러리를 관리합니다.

• 설정 파일: $(HANDSTACK_SRC)/libman.json

• 설치 위치: $(HANDSTACK_SRC)/2.Modules/wwwroot/wwwroot/lib

개발 PC에서 $(HANDSTACK_SRC) 디렉토리에서 명령 프롬프트로 libman restore 를 권장합니다.

오픈소스 라이브러리 관리 (2/2)

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "jquery@3.7.1",
      "destination": "wwwroot/lib/jquery"
    },
    {
      "library": "bootstrap@5.3.3",
      "destination": "wwwroot/lib/bootstrap"
    }
  ]
}

view 디렉토리 보안 (1/3)

운영 환경에서 /view 경로에 있는 업무 화면에 대한 보안을 위해 다음의 항목을 권장합니다.

• HTML·JavaScript 난독화는 소스 보호 보조 수단입니다. 접근 제어를 대체하지 않습니다.

• appsettings.json 설정으로 공개 접근 제한

• 업무 모듈의 사용자 권한에 따라 조회 메뉴에 따른 접근을 제한하도록 개발

view 디렉토리 보안 (2/3)

{
  "IsPermissionRoles": true,
  "PermissionRoles": [
    {
        "RoleID": "Developer",
        "ModuleID": "wwwroot",
        "ApplicationID": "view",
        "ProjectID": ".*",
        "TransactionID": ""
    },
    {
        "RoleID": "User",
        "ModuleID": "wwwroot",
        "ApplicationID": "view",

view 디렉토리 보안 (3/3)

        "ProjectID": "(BOD|TST)",
        "TransactionID": ".*"
    }
  ]
}